let btn = document.querySelector("button");
let body = document.querySelector("section");

btn.addEventListener("click", function () {
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置 HTTP 请求参数（请求方法、请求地址、是否异步等）
  xhr.open("GET", "http://localhost:3000/users");
  // 注册事件监听器，处理服务器端响应
  //XMLHttpRequest.DONE就是4
  xhr.onreadystatechange = function () {
    //readyState有0-4的取值，4表示加载完成
    if (xhr.readyState === 4) {
      let html = render(xhr.responseText);
      body.innerHTML = html;
    }
  };
  //发出请求
  xhr.send();
});

function render(jsondata) {
  let list = JSON.parse(jsondata);
  let html = list.map(
    (item) => `
  <div>
    <div class="uid">${item.uid}</div>
    <div class="pass">${item.password}</div>
  </div>
  `
  );

  return html.join("");
}
